<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html lang="cn zh">
<head >
    <meta charset="UTF-8">
    <title>用户注册</title>
    <link type="text/css" rel="stylesheet" href="css/register.css">
    <script type="text/javascript" src="scripts/jquery-3.2.1.js"></script>
    <script>
        $(function(){
            $("tr>td:first-child").addClass("text1")
            $("tr>td:last-child").addClass("text3")
            $("tr>td:first-child").next().addClass("text2")
            /*$("[name=email]").blur(function () {
                $.ajax({
                    type:"get",
                    url:"/userServlet",
                    data:{
                        "email":$("[name=email]").val(),
                        "doType":"doQuery",
                        "type":"judge"
                    },
                    success:function (data) {
                        if(data==1){
                            $("tr>td:eq(2)").html("该email已经注册！").addClass("text")
                        }else if(data==2){
                            if($("tr>td:eq(2)").hasClass("text")){
                                $("tr>td:eq(2)").html("该email可以正常使用！").removeClass("text")
                            }
                            $("tr>td:eq(2)").html("该email可以正常使用！").addClass("text")
                        }
                    }
                })
            })*/
            //验证email
            $("[name=email]").blur(function(){
                var str=$("[name=email]").val()
                var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
                if(reg.test(str)){
                    if($("tr>td:eq(2)").hasClass("text")){
                        $("tr>td:eq(2)").html("请填写有效的Email地址，在下一步中您将用此邮箱接收验证邮件"). removeClass("text")
                    }
                    $.ajax({
                    type:"get",
                    url:"/userServlet",
                    data:{
                        "email":$("[name=email]").val(),
                        "doType":"doQuery",
                        "type":"judge"
                    },
                    success:function (data) {
                        if(data==1){
                            $("tr>td:eq(2)").html("该email已经注册！").addClass("text")
                        }else if(data==2){
                            if($("tr>td:eq(2)").hasClass("text")){
                                $("tr>td:eq(2)").html("该email可以正常使用！").removeClass("text")
                            }
                            $("tr>td:eq(2)").html("该email可以正常使用！")
                        }
                    }
                })
                }else {
                    $("tr>td:eq(2)").html("请填写有效的Email地址，在下一步中您将用此邮箱接收验证邮件").addClass("text")
                }
            })

            //验证呢称规范
            $("[name=userName]").blur(function(){
                var length;
                var str=$("[name=userName]").val()
                var reg=/[^a-z0-9\u4e00-\u9fa5]/;
                if(str.match(/[\u4e00-\u9fa5]/g)==null){
                    length=str.length
                }else {
                    length=str.length+str.match(/[\u4e00-\u9fa5]/g).length
                }
                if(reg.test(str)||length<4||length>20){
                    $("tr>td:eq(5)").addClass("text")
                }else {
                    if($("tr>td:eq(5)").hasClass("text")){
                        $("tr>td:eq(5)"). removeClass("text")
                    }
                }
            })

            //验证密码
            $("[name=password]").blur(function(){
                var str=$("[name=password]").val()
                var length=str.length
                var reg=/[^0-9a-zA-Z]/;
                if(reg.test(str)||length<6||length>20){
                    $("tr>td:eq(8)").addClass("text")
                }else {
                    if($("tr>td:eq(8)").hasClass("text")){
                        $("tr>td:eq(8)"). removeClass("text")
                    }
                }
            })

            //验证重复输入密码是否正确
            $("[name=password2]").blur(function(){
                var str=$("[name=password]").val()
                var str2=$("[name=password2]").val()
                if(str!=str2){
                    $("tr>td:eq(11)").html("密码不一致").addClass("text")
                    return false;
                }else {
                    if($("tr>td:eq(11)").hasClass("text")){
                        $("tr>td:eq(11)").html("密码正确"). removeClass("text")
                    }
                }
            })

            $("[type=submit]").click(function(){
                //验证输入文本框是否为空
                $("input").each(function(){
                    if($(this).val()=="") {
                        $(this).parent().next().addClass("text")
                    }
                })
                if($("tr>td:last-child").hasClass("text")){
                    return false;
                }
                if($("span").hasClass("text")){
                    return false;
                }
            })


            //验证验证码是否正确
                $("[name=vcode]").blur(function () {
                    $.ajax({
                        type:"get",
                        url:"/codeServlet",
                        data:{
                            "doType":"doQuery",
                            "vcoade":$("[name=vcode]").val(),
                        },
                        success:function (data) {
                            if(data==1){
                                if($("span").hasClass("text")){
                                    $("span").html("验证码正确"). removeClass("text")
                                }
                            }else if(data==2){
                                $("span").html("验证码错误"). addClass("text")
                            }
                        }
                    })
                })

            $("#a").click(function () {
                var time=new Date().getMilliseconds();
                $("td>img").attr({"src":"/vcode?time=1"+time})
            })
        })
    </script>
</head>
<body>
    <div id="container"  align="center">
        <!--页面头部栏-->
        <div id="head">
            <iframe src="${pageContext.request.contextPath}/head.jsp" width="100%" height="100%" scrolling="no" frameborder="0">
            </iframe>
        </div>

        <!--注册信息栏-->
        <div id="center">
            <p id="p1">注册步骤：<span>1.填写信息</span>   >   <span>2.注册成功</span></p>
            <div id="register">
                <p id="p2">以下均为必填项</p>
                <form method="post" action="/userServlet">
                    <table>
                        <tr>
                            <td>请填写您的Email地址：</td>
                            <td><input name="email"></td>
                            <td>请填写有效的Email地址，在下一步中您将用此邮箱接收验证邮件</td>
                        </tr>
                        <tr>
                            <td>设置您在当当网的昵称：</td>
                            <td><input name="userName"></td>
                            <td>您的昵称可以由小写英文字母、中文、数字组成，长度4-20个字符，<br>一个汉字为两个字符</td>
                        </tr>
                        <tr>
                            <td>设置密码：</td>
                            <td><input type="password" name="password"></td>
                            <td>您的密码可以由大小写英文字母、数字组成，长度6-20</td>
                        </tr>
                        <tr>
                            <td>再次输入您设置的密码：</td>
                            <td><input type="password" name="password2"></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>验证码：</td>
                            <td><img src="/vcode">&nbsp&nbsp&nbsp<input size="4" name="vcode"></td>
                            <td><span></span>&nbsp&nbsp&nbsp请输入图片中的四个字母。<a style="color: blue" id="a">看不清楚？换个图片</a> </td>
                        </tr>
                    </table>
                    <input type="hidden" name="doType" value="doInsert">
                    <p><input type="submit" value="注册"></p>
                </form>
            </div>
        </div>

        <!--页面脚注栏-->
        <div id="foot">
            <iframe src="${pageContext.request.contextPath}/foot.jsp" width="100%" height="100%" scrolling="no" frameborder="0">
            </iframe>
        </div>
    </div>
</body>
</html>
